<template>
  <q-page-container>
    <main id="main">
      <!-- <head-cover /> -->
      <div class="main-container"><router-view /></div>
    </main>
    <q-page-scroller
      position="bottom-right"
      :scroll-offset="250"
      :offset="[18, 18]"
    >
      <q-btn icon="keyboard_arrow_up" size="xm" round color="primary" />
    </q-page-scroller>
    <q-ajax-bar
      ref="bar"
      position="top"
      color="primary"
      size="10px"
      skip-hijack
    />
    <MusicPlayer v-if="!isIndex" />
  </q-page-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import MusicPlayer from 'src/components/common/player/music.vue';
@Component({
  components: { MusicPlayer }
})
export default class MainLayout extends Vue {
  leftDrawerOpen = false;

  get isIndex() {
    return this.$route.path == '/' || this.$route.path == '/index';
  }
}
</script>

<style lang="scss" scoped>
#main {
  margin-top: 3rem;
}
.main-container {
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .main-container {
    max-width: 80%;
  }
}
@media screen and (max-width: 500px) {
  .main-container {
    max-width: 90%;
  }
}
</style>
